<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn :cmovees="movees" :cmsg="msg"></cpn>
    </div>
    <!-- 构造组件 -->
    <template id="cpn">
        <div>
            <h2>{{cmsg}}</h2>
            <h2>{{cmovees}}</h2>
        </div>
    </template>
</body>
<script src='../js/vue.js'></script>
<script>
    // 创建组件构造器
    const cpn = {
        template: `#cpn`,
        // 父传子使用props

        // 接收数据
        // props: ['cmovees','cmsg']
        props: {
            // 对象的好处 1.可以指定类型
            // cmovees: Array,
            // cmsg: String,
            // 2. 可以设置默认值
            cmovees: {
                type: Array,
                default: []
            },
            cmsg: {
                type: String,
                default: 'aaa',
                required: true
            }
        }
    }

    let app = new Vue({
        el: '#app',
        data: {
             msg:'hello vue.js',
             movees: ['海王','海贼王','海尔兄弟']
        },
        methods: {},
        // 注册组件
        components: {
            cpn
        }
    })
</script>
</html>